<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自助式分析系统-数据过滤</title>
    <script src="/js/jquery.min.js"></script>
    <style type="text/css" media="screen">
        body{margin: 0; padding: 0; background-color: #f1f1f1;}
        .inner-input{background-color: #fff;}
        .inner-input{position: relative; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 16px 16px; font-size: 16px; border-bottom: 1px solid #f2f2f2;}
        .inner-input label{height: 18px; width: 4.5em; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; margin-right: 16px; color: #333;}
        .to_chose{position: absolute; right: 15px; top: 10px; }
        .btn{position: fixed; width: 100%; height: auto; bottom: 0; border-top: 1px solid #f2f2f2; padding: 8px 16px; box-sizing: border-box; background-color: #fff;}
        button{width: 100%; line-height: 45px; font-size: 16px; border: none; border-radius: 3px; cursor: pointer; }
        button{background-color: #EC8336; color: #FFF;}

        .btn-groups button{background-color: #EC8336; margin: 0 16px; }
        .btn-groups button:hover{ background-color: #E5792A; }

        .btn-groups button.reset{background-color: #9E9E9E;}
        .btn-groups button.reset:hover{background-color: #BDBDBD;}
    </style>
    <!-- core css -->
    <link rel="stylesheet" href="/css/lc_switch.css">
    <!-- 依赖jquery -->
    <script src="/js/jquery.js"></script>
    <script src="/js/jquery.min.js"></script>
    <!-- core library -->
    <script src="/js/lc_switch.js"></script>
    <style>
        * {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--bg: #e3e4e8;
	--fg: #17181c;
	font-size: calc(20px + (40 - 20) * (100vw - 320px) / (1280 - 320));
}
body, button {
	font: 1em/1.5 Nunito, sans-serif;
}
body {
	background: var(--bg);
	color: var(--fg);
	display: grid;
	place-items: center;
	height: 90vh;
}
.upload-btn {
	--pathA: polygon(100% 0, 55% 57%, 55% 100%, 41% 100%, 41% 58%, 0 0);

	--pathB: polygon(0.75em 0em,0.975em 0.25em,0.975em 0.45em,0.975em 0.65em,1.125em 0.8em,1.125em 1em,0.9em 1em,0.75em 1em,0.6em 1em,0.375em 1em,0.375em 0.8em,0.525em 0.65em,0.525em 0.45em,0.525em 0.25em);
	--pathC: polygon(0.75em 0em,0.975em 0.25em,0.975em 0.45em,0.975em 0.65em,1.125em 0.8em,1.125em 1em,0.9em 1em,0.75em 1.5em,0.6em 1em,0.375em 1em,0.375em 0.8em,0.525em 0.65em,0.525em 0.45em,0.525em 0.25em);
	background: #255ff4;
	border-radius: 1.25em;
	color: #fff;
	cursor: pointer;
	overflow: hidden;
	padding: 0.5em 1em 0.5em 3em;
	position: relative;
	transition: all 0.1s linear;
	width: 10em;
	-webkit-tap-highlight-color: #0000;
	-webkit-appearance: none;
	appearance: none;
}
.upload-btn:disabled {
	cursor: not-allowed;
}
.upload-btn:not(:disabled):focus,
.upload-btn:not(:disabled):hover {
	background: #0b46da;
}
.upload-btn:focus {
	outline: transparent;
}
.upload-btn:before,
.upload-btn:after {
	content: "";
	display: block;
	position: absolute;
}
.upload-btn:before {
	background:
		radial-gradient(0.2em 0.2em at 1.2em 0.4em,#fff 45%,#fff0 50%),
		radial-gradient(0.1em 0.1em at 0.6em 0.8em,#fff 45%,#fff0 50%),
		radial-gradient(0.2em 0.2em at 0.4em 1.4em,#fff 45%,#fff0 50%),
		radial-gradient(0.1em 0.1em at 1em 1.3em,#fff 45%,#fff0 50%),
		radial-gradient(0.1em 0.1em at 0.6em 2em,#fff 45%,#fff0 50%),
		radial-gradient(0.1em 0.1em at 1.2em 1.9em,#fff 45%,#fff0 50%),
		radial-gradient(0.2em 0.2em at 0.9em 2.3em,#fff 45%,#fff0 50%),

		radial-gradient(0.2em 0.2em at 0.4em 2.7em,#fff 45%,#fff0 50%),
		radial-gradient(0.1em 0.1em at 1.2em 3.1em,#fff 45%,#fff0 50%),
		radial-gradient(0.2em 0.2em at 0.6em 3.3em,#fff 45%,#fff0 50%),
		radial-gradient(0.1em 0.1em at 1em 3.7em,#fff 45%,#fff0 50%),
		radial-gradient(0.1em 0.1em at 0.4em 4em,#fff 45%,#fff0 50%),
		radial-gradient(0.1em 0.1em at 1.2em 4.7em,#fff 45%,#fff0 50%),
		radial-gradient(0.2em 0.2em at 0.8em 4.4em,#fff 45%,#fff0 50%),
		radial-gradient(0.1em 0.1em at 0.3em 4.8em,#fff 45%,#fff0 50%),

		radial-gradient(0.2em 0.2em at 1.2em 5.4em,#fff 45%,#fff0 50%),
		radial-gradient(0.1em 0.1em at 0.6em 5.8em,#fff 45%,#fff0 50%),
		radial-gradient(0.2em 0.2em at 0.4em 6.4em,#fff 45%,#fff0 50%),
		radial-gradient(0.1em 0.1em at 1em 6.3em,#fff 45%,#fff0 50%),
		radial-gradient(0.1em 0.1em at 0.6em 7em,#fff 45%,#fff0 50%),
		radial-gradient(0.1em 0.1em at 1.2em 6.9em,#fff 45%,#fff0 50%),
		radial-gradient(0.2em 0.2em at 0.9em 7.3em,#fff 45%,#fff0 50%);
	background-repeat: no-repeat;
	bottom: 0;
	left: 1em;
	width: 1.5em;
	height: 10em;
}
.upload-btn:after {
	background: linear-gradient(#fff 67%,#f4b925 67%);
	clip-path: var(--pathA);
	top: 0.75em;
	left: 1em;
	width: 1.5em;
	height: 1.5em;
}
.upload-btn--running:before,
.upload-btn--done:before {
	animation: riseOnce 0.5s 0.3s linear, riseLoop 1s 0.8s linear infinite;
}
.upload-btn--running:after,
.upload-btn--done:after {
	clip-path: var(--pathC);
}
.upload-btn--running:after {
	animation: flyStart 1.3s ease-in-out, fly 2s 1.3s ease-in-out infinite;
}
.upload-btn--done:before {
	animation: riseLoop 1s 0.8s linear infinite paused;
}
.upload-btn--done:after {
	animation: flyEnd 0.8s linear forwards;
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #17181c;
		--fg: #e3e4e8;
	}
}
/* Animation */
@keyframes riseOnce {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(2.5em);
	}
}
@keyframes riseLoop {
	from {
		transform: translateY(2.5em);
	}
	to {
		transform: translateY(7.5em);
	}
}
@keyframes flyStart {
	from {
		clip-path: var(--pathA);
		transform: translateY(0);
	}
	17% {
		clip-path: var(--pathB);
		transform: translateY(0);
	}
	33% {
		clip-path: var(--pathC);
		transform: translateY(0);
	}
	to {
		transform: translateY(-10%);
	}
}
@keyframes fly {
	from, to {
		transform: translateY(-10%);
	}
	50% {
		transform: translateY(3%);
	}
}
@keyframes flyEnd {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(-5em);
	}
}
    </style>
    <style type="text/css">
    	#main{
    		width: 80%;
    		margin: 20px auto;
    	}
    	#tips{
    		text-align: center;
    		font-size: 25px;
    		font-weight: bolder;
    	}
    	#condition{
    		width: 35vh;
			height: 27px;
			margin-left: 15px;
			border: 1px solid black;
			border-radius: 5px;
			text-align: center;
    	}
    	#table_name{
    		width: 35vh;
			height: 27px;
			margin-left: 103px;
			border: 1px solid black;
			border-radius: 5px;
			text-align: center;
    	}
    	#upload{
    		margin: 5px auto;
    	}
    </style>

</head>
<body>
	<input type="text" value="{{index|safe}}" id="curr_file_index" style="display:none;">
	<input type="text" value="{{column|safe}}" id="column" style="display:none;">
	<div id="main">
		<div class="inner-input">
			<h1 id="tips" style="margin:auto;">数据过滤</h1>
		</div>
	    <div class="inner-input">
	        <label class="fixed-w" style="width: 8em;">大等于平均值</label>
	        <div class="to_chose">
	            <div class="lcs_wrap"><input type="checkbox" class="lcs_check" name="dept" value=";" autocomplete="off"><div id="above_avg" class="lcs_switch  lcs_on lcs_checkbox_switch"><div class="lcs_cursor"></div><div class="lcs_label lcs_label_on">ON</div><div class="lcs_label lcs_label_off">OFF</div></div></div>
	        </div>
	    </div>
	    <div class="inner-input">
	        <label class="fixed-w" style="width: 8em;">小等于平均值</label>
	        <div class="to_chose">
	            <div class="lcs_wrap"><input type="checkbox" class="lcs_check" name="dept" value="," autocomplete="off"><div id="below_avg" class="lcs_switch  lcs_checkbox_switch lcs_off"><div class="lcs_cursor"></div><div class="lcs_label lcs_label_on">ON</div><div class="lcs_label lcs_label_off">OFF</div></div></div>
	        </div>
	    </div>
		<div class="inner-input">
	        <label class="fixed-w" style="width: 8em;">大等于中位数</label>
	        <div class="to_chose">
	            <div class="lcs_wrap"><input type="checkbox" class="lcs_check" name="dept" value=";" autocomplete="off"><div id="above_median" class="lcs_switch  lcs_off lcs_checkbox_switch"><div class="lcs_cursor"></div><div class="lcs_label lcs_label_on">ON</div><div class="lcs_label lcs_label_off">OFF</div></div></div>
	        </div>
	    </div>
	    <div class="inner-input">
	        <label class="fixed-w" style="width: 8em;">小等于中位数</label>
	        <div class="to_chose">
	            <div class="lcs_wrap"><input type="checkbox" class="lcs_check" name="dept" value="," autocomplete="off"><div id="below_median" class="lcs_switch  lcs_checkbox_switch lcs_off"><div class="lcs_cursor"></div><div class="lcs_label lcs_label_on">ON</div><div class="lcs_label lcs_label_off">OFF</div></div></div>
	        </div>
	    </div>
	    <div class="inner-input">
	        自定义条件
	        <input type="text" name="condition" id="condition">
	        <div class="to_chose">
	            <div class="lcs_wrap"><input type="checkbox" class="lcs_check" name="dept" value="other" autocomplete="off"><div id="other" class="lcs_switch  lcs_checkbox_switch lcs_off"><div class="lcs_cursor"></div><div class="lcs_label lcs_label_on">ON</div><div class="lcs_label lcs_label_off">OFF</div></div></div>
	        </div>
	    </div>
        <div class="inner-input" style="text-align: center;padding-left: 54px;">
            自定义条件说明
            <br>
            用">&nbsp;=&nbsp;!=&nbsp;<&nbsp;,&nbsp;[]&nbsp;()&nbsp;exist&nbsp;this&nbsp;and"关键字写表达式<br>
            数字筛选 值在[25,50)范围、大于500和等于780的数据 <br>
            例: [25,50) and this > 150 and this = 780<br>
            文本筛选 值为"新"和含有文字"豆腐"和不为"None"的数据<br>
            例: this = "新"and exist "豆腐" and this != None
        </div>
		<div class="inner-input">
	        <input type="text" name="table_name" id="table_name" placeholder="新表名">
	    </div>
	    <div class="inner-input">
		    <button id="upload" class="upload-btn" type="button">开始过滤</button>
		</div>
	</div>
</body>

<script type="text/javascript">
    $('.lcs_check').lc_switch();
</script>
<script type="text/javascript">
	var choose = "above_avg";
	$("#condition").bind("input propertychange", function() {
			choose = $("#condition").val();
			$(".lcs_switch").each(function(){
				$(this).attr('class', 'lcs_switch lcs_checkbox_switch lcs_off');
			});
			$("#other").attr('class', 'lcs_switch lcs_checkbox_switch lcs_on');
	});
	$(".lcs_switch").click(function() {
   		$(".lcs_switch").each(function(){
		    $(this).attr('class', 'lcs_switch lcs_checkbox_switch lcs_off');
		});
		choose = $(this).attr("id");
		if (choose == "other") {
			choose = $("#condition").val();
		}
   })
    document.addEventListener("DOMContentLoaded",function(){
	let btn = this.getElementById("upload");

	if (btn) {
		btn.addEventListener("click",function(){
			let cl = this.classList,
				r = "upload-btn--running",
				d = "upload-btn--done",
				dur = 4000;

			if (!cl.contains(r) && !cl.contains(d) && !this.disabled && $("#table_name").val().length > 0) {
				cl.add(r);
				this.disabled = true;
				this.innerHTML = "过滤中…";
				// 发请求切割
				$.ajax({
					//请求方式
					type : "post",
					//请求的媒体类型
					contentType: "application/json;charset=UTF-8",
					//请求地址
					url : "/data_filter/"+$("#curr_file_index").val(),
					//数据，json字符串
					data :  JSON.stringify({
						'column':$("#column").val(),
						'table_name':$("#table_name").val(),
						'choose': choose
					}),
					//请求成功
					success : function(result) {
						if(result.status === 'success'){
							cl.remove(r);
							cl.add(d);
							$("#upload").html("完成!");
							window.close();
						}else{
							$("#upload").html("过滤失败");
							window.close();
						}
					},
					//请求失败，包含具体的错误信息
					error : function(e){
						console.log(e);
					}
				});

			}
		});
	}
});
</script>
</html>